<script setup lang="ts">
// ts写法
// const props = withDefaults(
//   defineProps<{
//     money: number
//     arr: number[]
//   }>(),
//   {
//     money: 999,
//     arr: () => [1, 2, 3]
//   }
// )

import { PropType } from 'vue'

// js适配ts写法
const props = defineProps({
  money: {
    type: Number as PropType<number>,
    required: true,
    default: 999
  },
  gender: {
    type: Number as PropType<0 | 1>
  }
})
const emits = defineEmits<{
  (e: 'sonSetMoney', s: number): void
}>()

// 访问：template :  {{money}}   js:  props.money
const getMoney = () => {
  console.log(props.money)
}
const btnClick = () => {
  emits('sonSetMoney', -1)
}
</script>

<template>
  <div class="son-page">
    son:{{ money }}
    <button @click="getMoney">访问money</button>
    <button @click="btnClick">修改money</button>
    <!-- <div>{{ arr }}</div> -->
  </div>
</template>

<style scoped>
.son-page {
  width: 300px;
  height: 300px;
  border: 5px solid red;
}
</style>
